<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="../第二次测试/jquery-3.4.1.js"></script>
</head>

<body>
    <div class="top-box">
        <div class="top-nav">
            <span class="ftn-bk">新闻</span>
            <span class="ftn-bk">hao123</span>
            <span class="ftn-bk">地图</span>
            <span class="ftn-bk">视频</span>
            <span class="ftn-bk">贴吧</span>
            <span class="ftn-bk">学术</span>
            <span class="user-menu">元谋人
                <div class="user-down">
                    <span>个人中心</span>
                    <span>账号设置</span>
                    <span>意见反馈</span>
                    <span>退出</span>
                </div>
            </span>
            <span class="set-menu">设置
                <div class="set-down">
                    <span>搜索设置</span>
                    <span>高级搜索</span>
                    <span>关闭预测</span>
                    <span>隐私设置</span>
                </div>
            </span>
            <span class="about-menu">更多产品
                <div class="about-down" style="zoom: 1">
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                    <div class="item-box">
                        <img src="images/qqyy.png" alt="">
                        <span>糯米</span>
                    </div>
                </div>
            </span>
        </div>
    </div>
    <div class="main-box">
        <div class="content-box">
            <div class="pic-box">
                <img src="images/01.png" alt="" style="z-index: 2">
                <img src="images/02.png" alt="" style="z-index: 1">
                <img src="images/03.png" alt="" style="z-index: 1">
                <img src="images/04.png" alt="" style="z-index: 1">
                <img src="images/05.png" alt="" style="z-index: 1">
            </div>
            <button class="prev"></button>
            <button class="next"></button>
            <div class="icons-box">
                <span class="current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <!-- <script>
        var prev = document.getElementsByClassName("prev")[0];
        var next = document.getElementsByClassName("next")[0];
        var pics = document.querySelectorAll(".pic-box>img");
        var icons = document.querySelectorAll(".icons-box>span");
        var index = 0;
        prev.onclick = function () {
            index--;
            move(index)
        }
        next.onclick = function () {
            index++;
            move(index)
        }
        for (let i = 0; i < icons.length; i++) {
            icons[i].index = i;
            icons[i].onclick = function () {

                move(this.index);
            }
        }

        function move(x) {
            index = x;
            if (index > 4) {
                index = 0
            };
            if (index < 0) {
                index = 4
            };
            for (let i = 0; i < pics.length; i++) {
                pics[i].style.display = "none";
                icons[i].classList.remove("current")
            }
            pics[index].style.display = "block";
            icons[index].classList.add("current")
        }
    </script> -->
    <script>
        var wThis = this;
        var index = 0
        $(".prev").click(function () {
            if (!$(".prev").is(":animated")) {
                index--;
                onmove(index);
            }
        })
        $(".next").click(function () {
            if (!$(".next").is(":animated"))  {
                index++;
                onmove(index);
            }
        })
        $(".icons-box span").click(function () {
            var iconThis = this;
            if (!$(".icons-box span").is(":animated")) {   
                wThis.index = $(this).index();
                onmove(wThis.index)
            }
        })

        function onmove(index) {
            wThis.index = this.index;
            if (wThis.index > 4)(wThis.index = 0)
            if (wThis.index < 0)(wThis.index = 4)
            console.log(this.index)
            $(".pic-box img").eq(this.index).fadeIn(1000).siblings().fadeOut(1000);
            $(".icons-box span").eq(this.index).addClass("current").siblings().removeClass("current");
        }
    
    </script>
</body>

</html>